const plugin = require('tailwindcss/plugin')

module.exports = {
  purge: [],
  theme: {
    extend: {
      fontFamily: {
        body: ['Roboto']
      }
    },
  },
  variants: {
    backgroundColor: ['responsive', 'hover', 'focus'],
  },
  plugins: [
    plugin(({ addBase, config }) => {
      addBase({
        'h1': { fontSize: config('theme.fontSize.2xl') },
        'h2': { fontSize: config('theme.fontSize.xl') },
        'h3': { fontSize: config('theme.fontSize.lg') },
        'h4': { fontSize: config('theme.fontSize.2xl') },
      })
    }),
    plugin(function ({ addUtilities }) {
      const newUtilities = {
        '.rotate-0': {
          transform: 'rotate(0deg)',
        },
        '.rotate-90': {
          transform: 'rotate(90deg)',
        },
        '.rotate-180': {
          transform: 'rotate(180deg)',
        },
        '.rotate-270': {
          transform: 'rotate(270deg)',
        },
        '.rotate-111': {
          transform: 'rotate(111deg)',
        },
      }

      addUtilities(newUtilities, ['responsive', 'hover'])
    })
  ],
}
